<?php

/*
Template Name: Contact Us
*/

?>
<?php get_header(); ?>
<?php get_sidebar(); ?>
       
        <div class="container">
        	
            <!--All Content Start-->
            <div class="content-wrapper">

                <!--Page Title-->
                <div class="page-title">
                	<div class="page-title-detail">
                    	<h1>Contact Us</h1>
                        <p class="sub-title">Sed diam nonumy eirmod tempor invidunt</p>
                    </div>
                    <nav class="page-navigation">
                    	<ul>
                        	<li><a href="index.html">home</a></li>
                            <li>contact us</li>
                        </ul>
                    </nav>
                </div>
                <!--End-->
                
                <!--Body Content Start-->
                <section class="stripe">
                	
                    <!--Map-->
                    <div class="map-container">
                        <div id="map-canvas"></div>
                    </div>
                    
                    <!--Contact Area-->
                    <div class="contact-area">
                    	
                        <!--Send Message-->
                        <div class="send-message">
                        	<div class="section-title-area">
                                <h2><span class="section-title contact">Send a message</span></h2>
                            </div>
                            <div class="comment-fieldbox">
                            	<form id="form_contact">
                                    <input id="name" class="input-name" type="text" name="name" placeholder="Your name *" required />
                                    <input id="email" class="input-email" type="text" name="email" placeholder="Your email *" required />
                                    <input id="mysubject" class="input-subject" type="text" name="mysubject" placeholder="Subject *" required />
                                    <textarea id="comments" class="input-textarea" name="comment" placeholder="Your message *" required></textarea>
                                    <div class="comment-active">
                                        <span>All fields are mandatory.</span>
                                        <input id="email_submit" class="submit-button" type="submit" value="Send Message"/>
                                    </div>
                                    <div class="email_success">
                                        <div id="reply_message" class="email_loading" ></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!--Send Message End-->
                        
                        <!--Contact Info-->
                        <div class="contact-info">
                        	<div class="section-title-area">
                                <h2><span class="section-title contact">Contact information</span></h2>
                            </div>
                            <ul class="contact-status fa-ul">
                            	<li>
                                	<i class="fa-li fa fa-home"></i><?php echo get_option('dn_company_address'); ?>
                                </li>
                                <li>
                                	<i class="fa-li fa fa-tablet"></i><?php echo get_option('dn_company_phone_number'); ?>
                                </li>
                                <li>
                                	<i class="fa-li fa fa-envelope"></i><?php echo get_option('dn_company_email'); ?>
                                </li>
                            </ul>
                            
                            <!--Text Area-->
                            <div class="contact-textarea">
                            	<figure>
                                	<img src="<?php bloginfo('template_url'); ?>/images/upload/contact-image.jpg" alt="contact us" />
                                </figure>
                                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor amet lorem ipsum dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua.</p><br>
                                <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr diam.</p>
                                
                                <!--Social Media-->
                                    <ul class="contact-social">
                                    	<li>
                                        	Follow Us
                                        </li>
                                        <li>
                                            <a href="http://facebook.com/<?php echo get_option('dn_facebook_account'); ?>">
                                                <img src="<?php bloginfo('template_url'); ?>/images/social-media/top-social-media1.png" alt="facebook" />
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="<?php bloginfo('template_url'); ?>/images/social-media/top-social-media2.png" alt="facebook" />
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="<?php bloginfo('template_url'); ?>/images/social-media/top-social-media3.png" alt="facebook" />
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <img src="<?php bloginfo('template_url'); ?>/images/social-media/top-social-media4.png" alt="facebook" />
                                            </a>
                                        </li>
                                    </ul>
                                
                            </div>
                            
                        </div>
                        <!--Contact Info End-->
                        
                    </div>
                    
                </section>
                <!--Body Content End-->
                
            </div>
            <!--All Content End-->
            <!--Google Map Script-->
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
            <script>
                function initialize() {
                	
                	"use strict";
                
                	  var mapOptions = {
                		zoom: 15,
                		center: new google.maps.LatLng(10.8747758, 106.7443804),
                		mapTypeId: google.maps.MapTypeId.ROADMAP
                	  };
                	
                	  var map = new google.maps.Map(document.getElementById('map-canvas'),
                		  mapOptions);
                	
                	  var marker = new google.maps.Marker({
                		position: map.getCenter(),
                		map: map,
                		title: 'Location Name'
                	  });
                	
                	  google.maps.event.addListener(marker, 'click', function() {
                		map.setZoom(8);
                		map.setCenter(marker.getPosition());
                	  });
            	}
            	
            	google.maps.event.addDomListener(window, 'load', initialize);
            
            </script>
            <?php get_footer(); ?>